Below is an example of a more semantic and accessible tabbox. Turn off JavaScript and refresh the page to see why this box is more semantic, unobtrusive and accessible than others.
You can also see the same example, with vertically oriented tabs
To see what cool things you can do with this tab box, look at the "The Über-Cool, Shiny, Tab Box".
The Internet is a worldwide, publicly accessible network of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP). It is a "network of networks" that consists of millions of smaller domestic, academic, business, and government networks, which together carry various information and services, such as electronic mail, online chat, file transfer, and the interlinked Web pages and other documents of the World Wide Web.
Accessibility is a general term used to describe the degree to which a system is usable by as many people as possible. In other words, it is the degree of ease with which it is possible to reach a certain location from other locations. It is not to be confused with usability which is used to describe how easily an entity (e.g., device, service, environment) can be used by any type of user. Accessibility can also be viewed as the "ability to access" the functionality, and possible benefit, of some system or entity; such a definition brings in access-based individual rights laws and regulations that are discussed below. One meaning of accessibility specifically focuses on people with disabilities and their right of access to entities, often through use of assistive devices such as screen-reading web browsers or wheelchairs. Other meanings are discussed below.
Accessibility is strongly related to universal design when the approach involves "direct access." This is about making things accessible to all people (whether they have a disability or not). However, products marketed as having benefited from a Universal Design process are often actually the same devices customized specifically for use by people with disabilities.[citation needed] An alternative is to provide "indirect access" by having the entity support the use of a person's assistive technology to achieve access (e.g., screen reader).
Progressive enhancement is a label for a particular strategy of Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies, in a layered fashion that allows everyone to access the basic content and functionality of a Web page, using any browser or Internet connection, while also enabling those with better bandwidth or more advanced browser software to experience an enhanced version of the page.
The markup for this tabbox is really very simple. The title and content for each tab are held together in a "tabPanel" div:
CSS is used to hide the "tabContent" divs off screen and arrange the tabs either vertically or horizontally. You'll also notice that the links point to the content (via #contentID) and the event handlers are added by the JavaScript, unobtrusively.
See my blog post for more information.